<template>
  <div>
    <div class="swiper-container">
      <div class="swiper-wrapper content">
        <div class="swiper-slide content-1 bg1">slider1</div>
        <div class="swiper-slide content-1 bg2">slider2</div>
        <div class="swiper-slide content-1 bg3">slider3</div>
      </div>
    </div>
    <!-- 自定义分页，列表 -->
    <ul class="nav custom-pagination">
      <li class="nav-item">
        <a href="javascript:;">测试1</a>
      </li>
      <li class="nav-item">
        <a href="javascript:;">测试2</a>
      </li>
      <li class="nav-item">
        <a href="javascript:;">测试3</a>
      </li>
    </ul>
  </div>
</template>
<script>
import Swiper from "../assets/swiper/dist/js/swiper.min.js";
import "../assets/swiper/dist/css/swiper.min.css";
export default {
  name: "leftRight",
  data() {
    return {
      aaa: "",
    };
  },
  mounted() {
    this.$nextTick(() => {
      var mySwiper = new Swiper(".swiper-container", {
        pagination: ".custom-pagination", //容器
        paginationType: "custom", //自定义
        paginationClickable: true, //点击分页器的指示点分页器会控制Swiper切换。
        paginationCustomRender: function (swiper, current, total) {
          console.log(swiper);
          console.log(current);
          console.log(total);
         //  return current + " of " + total;
        },
      });
    });
  },
};
</script>
<style lang="scss" scoped>
// 轮播图
.swiper-container {
  width: 100%;
  height: 100%;
  margin: 50px 0;
  .swiper-wrapper {
    //  width: 375px;
    //  height: 667px;
    .swiper-slide {
      // width: 100%;
      // height: 100%;
    }
  }
}
.bg1 {
  background: rgb(255, 156, 255) !important;
}
.bg2 {
  background: rgb(167, 251, 251) !important;
}
.bg3 {
  background: rgb(195, 255, 195) !important;
}
</style>